<template>
  <div class="all-album mt-2">
    <div v-if="albumList.length > 0">
      <song-list-layout
          :playlists="albumList"
          @jumpPlayListDetails="jumpPlayListDetails"
      />
      <van-pagination
          v-if="store.songDetails?.artist?.albumSize > 20"
          class="van-pagination"
          v-model="currentPage"
          :total-items="store.songDetails?.artist?.albumSize"
          :items-per-page="20"
          :show-page-size="6"
          force-ellipses
          @change="pageChange"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>
    <loading v-else site=".app"/>
  </div>
</template>

<script setup>
import SongListLayout from '@/components/SongListLayout/index.vue'
import {useStore} from "@/store/index"
import {useRoute, useRouter} from "vue-router"
import {reactive, toRefs} from "vue";

const router = useRouter()
const store = useStore()
const route = useRoute()
const data = reactive({
  albumList: [], // 专辑列表
  currentPage: 1, // 默认展示的分页
  page: {
    limit: 20,
    num: 0 // 偏移量
  },// 分页数据
})
const { albumList, currentPage } = toRefs(data)

// 获取歌手专辑
const getArtistAlbum = () => {
  //  获取歌手其他专辑 { id:歌手id, limit: 返回数据, offset: 偏移量 }
  store.getArtistAlbum({
    id: route.query.id,
    limit: data.page.limit,
    offset: data.page.limit * data.page.num
  }).then(res => {
    data.albumList = res.hotAlbums
    // console.log(res)
  })
}
// 获取歌手专辑
getArtistAlbum()

// 设置tab下标
store.songTabIndex = 1

// 分页改变触发
const pageChange = (v) => {
  data.page.num =  v - 1
  // 获取歌手专辑数据
  getArtistAlbum()
}

// 点击专辑跳转
const jumpPlayListDetails = (id) => {
  router.push({
    path: '/collection-detail',
    query: {
      id
    }
  })
}
defineProps({
  albumInfo: Object
})
</script>

<style scoped lang="scss">
:deep(.van-pagination) {

  .van-pagination__item--prev,.van-pagination__item--next  {

  }
  .van-pagination__item--active {
    color: v-bind('store.theme.hoverTextColor')!important;
  }
  .van-pagination__item--page, .van-pagination__item--next, .van-pagination__item--prev {
    color: v-bind('store.theme.textColor');
    button {
      background-color: v-bind('store.theme.HoverBgColor');
    }
  }
}
</style>
